<template>
    <view class="contentBox">
             <view @click="handleItemClick">
                <u-image :src="imgCover" mode="widthFix" width="100%" radius="4" />
                <view class="u-line-2 contentBox-item-title">
                   {{ title }}
                </view>
            </view>
            <view class="u-flex u-flex-between contentBox-item-footer">
                <view class="u-flex u-flex-middle">
                    <u-avatar class="u-m-r-10" size="16" :src="userInfo.avatar"  />
                    <span class="">{{ userInfo.nickname }}</span>
                </view>
                <view class="u-flex u-flex-middle">
                    <u-icon name="heart" color="#999" />
                    <span>{{ likes }}</span>
                </view>
            </view>
    </view>
</template>

<script setup>
import { defineEmits } from 'vue'

const props = defineProps({
    imgCover:{
        type: String,
        default: false
    },
    title: String,
    userInfo: {
        type: Object,
        default: {
            avatar: '',
            nickname: ''
        }
    },
    likes: {
        type: Number,
        default: 0
    }
})

const emitFunc = defineEmits(['itemClick'])

const handleItemClick = () => {
    emitFunc('itemClick')
}
</script>

<style lang="scss">
.contentBox{
        margin-bottom: 10rpx;
        background-color: #f7f7f7;
        &-item {
		// width: 48%;
		border-radius: 18upx;
		overflow: hidden;
		margin-bottom: 20upx;
        
		&-title {
			font-size: 14px;
			font-weight: 500;
			color: $uni-color-title;
			padding: 18upx;
		}

		&-footer {
			padding: 0 18upx 20upx;
			font-size: 12px;
			color: #666;
		}
	}
}
</style>